<!-- src/components/BaseButton.vue -->
<template>
  <component
      :is="as"
      :class="buttonClasses"
      @click="$emit('clickButton')"
      :disabled="disabled"
      :aria-label="ariaLabel"
  >
    <slot />
  </component>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  as: {
    type: String,
    default: 'button', // 默认作为 button 元素
  },
  variant: {
    type: String,
    default: 'primary', // primary, secondary, success, danger, warning, info
  },
  size: {
    type: String,
    default: 'medium', // small, medium, large
  },
  outline: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  ariaLabel: {
    type: String,
    default: '',
  },
})

const buttonClasses = computed(() => {
  const classes = ['base-button']

  // Variant classes
  if (props.outline) {
    classes.push(`outline-${props.variant}`)
  } else {
    classes.push(props.variant)
  }

  // Size classes
  classes.push(`btn-${props.size}`)

  // Disabled state
  if (props.disabled) {
    classes.push('disabled')
  }

  return classes
})
</script>


<style scoped>
.base-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-small) var(--spacing-large);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: var(--font-size-base);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, transform 0.2s;
  color: white;
  text-decoration: none;
}

.base-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Variant Styles */
.primary {
  background-color: var(--primary-color);
}

.primary:hover:not(:disabled) {
  color: black;
  background-color: var(--secondary-color);
}

.secondary {
  background-color: #95a5a6;
}

.secondary:hover:not(:disabled) {
  background-color: #7f8c8d;
}

.success {
  background-color: #28a745;
}

.success:hover:not(:disabled) {
  background-color: #218838;
}

.danger {
  background-color: #dc3545;
}

.danger:hover:not(:disabled) {
  background-color: #c82333;
}

.warning {
  background-color: #ffc107;
  color: #212529;
}

.warning:hover:not(:disabled) {
  background-color: #e0a800;
}

.info {
  background-color: #17a2b8;
}

.info:hover:not(:disabled) {
  background-color: #138496;
}

/* Outline Variants */
.outline-primary {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}

.outline-primary:hover:not(:disabled) {
  background-color: var(--primary-color);
  color: white;
}

.outline-secondary {
  background-color: transparent;
  border: 2px solid #95a5a6;
  color: #95a5a6;
}

.outline-secondary:hover:not(:disabled) {
  background-color: #95a5a6;
  color: black;
}

.outline-success {
  background-color: transparent;
  border: 2px solid #28a745;
  color: #28a745;
}

.outline-success:hover:not(:disabled) {
  background-color: #28a745;
  color: white;
}

.outline-danger {
  background-color: transparent;
  border: 2px solid #dc3545;
  color: #dc3545;
}

.outline-danger:hover:not(:disabled) {
  background-color: #dc3545;
  color: white;
}

.outline-warning {
  background-color: transparent;
  border: 2px solid #ffc107;
  color: #ffc107;
}

.outline-warning:hover:not(:disabled) {
  background-color: #ffc107;
  color: #212529;
}

.outline-info {
  background-color: transparent;
  border: 2px solid #17a2b8;
  color: #17a2b8;
}

.outline-info:hover:not(:disabled) {
  background-color: #17a2b8;
  color: white;
}

/* Size Styles */
.btn-small {
  padding: var(--spacing-small) var(--spacing-small);
  font-size: var(--font-size-small);
}

.btn-medium {
  padding: var(--spacing-small) var(--spacing-large);
  font-size: var(--font-size-base);
}

.btn-large {
  padding: var(--spacing-large) var(--spacing-large);
  font-size: var(--font-size-large);
}

/* Disabled State */
.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Active State */
.base-button:active:not(:disabled) {
  transform: scale(0.98);
}

/* Icon Support */
.base-button i {
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
}

/* Example for including an icon before text */
.icon-before {
  margin-right: 8px;
}
</style>
